<template>
	<div v-if="isDesktop" class="login pc">
		<h3 class="login-logo">
			<img v-if="logo" :src="logo" alt="logo" />
			<img v-else src="/logo.svg" alt="logo" />
			<span>{{ title }}</span>
		</h3>

		<a-row align="stretch" class="login-box">
			<a-col :xs="0" :sm="12" :md="13">
				<div class="login-left">
					<img class="login-left__img" src="@/assets/images/banner.png" alt="banner" />
				</div>
			</a-col>
			<a-col :xs="24" :sm="12" :md="11">
				<div class="login-right">
					<h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
					<EmailLogin v-if="isEmailLogin" />
					<a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
						<a-tab-pane key="1" title="账号登录">
							<component :is="AccountLogin" v-if="activeTab === '1'" />
						</a-tab-pane>
						<a-tab-pane key="2" title="手机号登录">
							<component :is="PhoneLogin" v-if="activeTab === '2'" />
						</a-tab-pane>
					</a-tabs>
					<div class="login-right__oauth">
						<a-divider orientation="center">其他登录方式</a-divider>
						<div class="list">
							<div v-if="isEmailLogin" class="mode item" @click="toggleLoginMode">
								<icon-user />
								账号/手机号登录
							</div>
							<div v-else class="mode item" @click="toggleLoginMode">
								<icon-email />
								邮箱登录
							</div>
							<a class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
								<GiSvgIcon name="gitee" :size="24" />
							</a>
							<a class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
								<GiSvgIcon name="github" :size="24" />
							</a>
						</div>
					</div>
				</div>
			</a-col>
		</a-row>

		<div v-if="isDesktop" class="footer">
			<div class="beian">
				<div class="below text">{{ appStore.getCopyright() }}{{ appStore.getForRecord() ? ` · ${appStore.getForRecord()}` : '' }}</div>
			</div>
		</div>

		<GiThemeBtn class="theme-btn" />
		<Background />
	</div>

	<div v-else class="login h5">
		<div class="login-logo">
			<img v-if="logo" :src="logo" alt="logo" />
			<img v-else src="/logo.svg" alt="logo" />
			<span>{{ title }}</span>
		</div>
		<a-row align="stretch" class="login-box">
			<a-col :xs="24" :sm="12" :md="11">
				<div class="login-right">
					<h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
					<EmailLogin v-if="isEmailLogin" />
					<a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
						<a-tab-pane key="1" title="账号登录">
							<component :is="AccountLogin" v-if="activeTab === '1'" />
						</a-tab-pane>
						<a-tab-pane key="2" title="手机号登录">
							<component :is="PhoneLogin" v-if="activeTab === '2'" />
						</a-tab-pane>
					</a-tabs>
				</div>
			</a-col>
		</a-row>
		<div class="login-right__oauth">
			<a-divider orientation="center">其他登录方式</a-divider>
			<div class="list">
				<div v-if="isEmailLogin" class="mode item" @click="toggleLoginMode">
					<icon-user />
					账号/手机号登录
				</div>
				<div v-else class="mode item" @click="toggleLoginMode">
					<icon-email />
					邮箱登录
				</div>
				<a v-if="!tenantStore.isTenantConfigured" class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
					<GiSvgIcon name="gitee" :size="24" />
				</a>
				<a v-if="tenantStore.isTenantConfigured" class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
					<GiSvgIcon name="github" :size="24" />
				</a>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import Background from './components/background/index.vue';
import AccountLogin from './components/account/index.vue';
import PhoneLogin from './components/phone/index.vue';
import EmailLogin from './components/email/index.vue';
import { socialAuth } from '@/apis/auth';
import { useAppStore } from '@/stores';
import { useTenantStore } from '@/stores/modules/tenant';
import { useDevice } from '@/hooks';
import { getTenantIdByDomain, getTenantStatus } from '@/apis';

defineOptions({ name: 'Login' });

const appStore = useAppStore();
const tenantStore = useTenantStore();

const { isDesktop } = useDevice();
const title = computed(() => appStore.getTitle());
const logo = computed(() => appStore.getLogo());

const isEmailLogin = ref(false);
const activeTab = ref('1');

// 切换登录模式
const toggleLoginMode = () => {
	isEmailLogin.value = !isEmailLogin.value;
};

// 第三方登录授权
const onOauth = async (source: string) => {
	const { data } = await socialAuth(source);
	window.location.href = data.authorizeUrl;
};

// 查询租户状态和租户编码
const onGetTenant = async () => {
	const { data } = await getTenantStatus();
	tenantStore.setTenantEnable(data);
	// 开启租户 根据地址(域名)查询租户code
	if (data) {
		const domain = window.location.hostname;
		const { data: tenantId } = await getTenantIdByDomain(domain);
		tenantStore.setTenantId(tenantId);
	}
};
onMounted(() => {
	onGetTenant();
});
</script>

<style scoped lang="scss">
@media screen and (max-width: 570px) {
	.pc {
		display: none !important;
		background-color: white !important;
	}

	.login {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		background-color: var(--color-bg-5);
		color: #121314;

		&-logo {
			width: 100%;
			height: 104px;
			font-weight: 700;
			font-size: 20px;
			line-height: 32px;
			display: flex;
			padding: 0 20px;
			align-items: center;
			justify-content: start;
			background-image: url('/src/assets/images/login_h5.jpg');
			background-size: 100% 100%;
			box-sizing: border-box;

			img {
				width: 34px;
				height: 34px;
				margin-right: 8px;
			}
		}

		&-box {
			width: 100%;
			display: flex;
			z-index: 999;
		}
	}

	.login-right {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 30px 30px 0;
		box-sizing: border-box;

		&__title {
			color: var(--color-text-1);
			font-weight: 500;
			font-size: 20px;
			line-height: 32px;
			margin-bottom: 20px;
		}

		&__form {
			:deep(.arco-tabs-nav-tab) {
				display: flex;
				justify-content: start;
				align-items: center;
			}

			:deep(.arco-tabs-tab) {
				color: var(--color-text-2);
				margin: 0 20px 0 0;
			}

			:deep(.arco-tabs-tab-title) {
				font-size: 16px;
				font-weight: 500;
				line-height: 22px;
			}

			:deep(.arco-tabs-content) {
				margin-top: 10px;
			}

			:deep(.arco-tabs-tab-active),
			:deep(.arco-tabs-tab-title:hover) {
				color: rgb(var(--arcoblue-6));
			}

			:deep(.arco-tabs-nav::before) {
				display: none;
			}

			:deep(.arco-tabs-tab-title:before) {
				display: none;
			}
		}

		&__oauth {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding-bottom: 20px;

			// margin-top: auto;
			// margin-bottom: 20px;
			:deep(.arco-divider-text) {
				color: var(--color-text-4);
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
			}

			.list {
				align-items: center;
				display: flex;
				justify-content: center;
				width: 100%;

				.item {
					margin-right: 15px;
				}

				.mode {
					color: var(--color-text-2);
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
					padding: 6px 10px;
					align-items: center;
					border: 1px solid var(--color-border-3);
					border-radius: 32px;
					box-sizing: border-box;
					display: flex;
					height: 32px;
					justify-content: center;
					cursor: pointer;

					.icon {
						width: 21px;
						height: 20px;
					}
				}

				.mode svg {
					font-size: 16px;
					margin-right: 10px;
				}

				.mode:hover,
				.mode svg:hover {
					background: rgba(var(--primary-6), 0.05);
					border: 1px solid rgb(var(--primary-3));
					color: rgb(var(--arcoblue-6));
				}
			}
		}
	}

	.theme-btn {
		position: fixed;
		top: 20px;
		right: 30px;
		z-index: 999;
	}

	// 新增弹窗层级设置
	.arco-modal-wrapper {
		z-index: 1000;
	}

	.footer {
		align-items: center;
		box-sizing: border-box;
		position: absolute;
		bottom: 10px;
		z-index: 999;

		.beian {
			.text {
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0.2px;
				line-height: 20px;
				text-align: center;
			}

			.below {
				align-items: center;
				display: flex;
			}
		}
	}
}

@media screen and (min-width: 571px) {
	.h5 {
		display: none !important;
	}

	.login {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: var(--color-bg-5);

		&-logo {
			position: fixed;
			top: 20px;
			left: 30px;
			z-index: 9999;
			color: var(--color-text-1);
			font-weight: 500;
			font-size: 20px;
			line-height: 32px;
			margin-bottom: 20px;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				width: 34px;
				height: 34px;
				margin-right: 8px;
			}
		}

		&-box {
			width: 86%;
			max-width: 850px;
			display: flex;
			z-index: 999;
			box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
		}
	}

	.login-left {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));

		&__img {
			width: 100%;
			position: absolute;
			bottom: 0;
			right: 0;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			transition: all 0.3s;
			object-fit: cover;
		}
	}

	.login-right {
		width: 100%;
		height: 100%;
		background: var(--color-bg-1);
		display: flex;
		flex-direction: column;
		padding: 30px 30px 0;
		box-sizing: border-box;

		&__title {
			color: var(--color-text-1);
			font-weight: 500;
			font-size: 20px;
			line-height: 32px;
			margin-bottom: 20px;
		}

		&__form {
			:deep(.arco-tabs-nav-tab) {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			:deep(.arco-tabs-tab) {
				color: var(--color-text-2);
			}

			:deep(.arco-tabs-tab-title) {
				font-size: 16px;
				font-weight: 500;
				line-height: 22px;
			}

			:deep(.arco-tabs-content) {
				margin-top: 10px;
			}

			:deep(.arco-tabs-tab-active),
			:deep(.arco-tabs-tab-title:hover) {
				color: rgb(var(--arcoblue-6));
			}

			:deep(.arco-tabs-nav::before) {
				display: none;
			}

			:deep(.arco-tabs-tab-title:before) {
				display: none;
			}
		}

		&__oauth {
			margin-top: auto;
			margin-bottom: 20px;

			:deep(.arco-divider-text) {
				color: var(--color-text-4);
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
			}

			.list {
				align-items: center;
				display: flex;
				justify-content: center;
				width: 100%;

				.item {
					margin-right: 15px;
				}

				.mode {
					color: var(--color-text-2);
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
					padding: 6px 10px;
					align-items: center;
					border: 1px solid var(--color-border-3);
					border-radius: 32px;
					box-sizing: border-box;
					display: flex;
					height: 32px;
					justify-content: center;
					cursor: pointer;

					.icon {
						width: 21px;
						height: 20px;
					}
				}

				.mode svg {
					font-size: 16px;
					margin-right: 10px;
				}

				.mode:hover {
					background: rgba(var(--primary-6), 0.05);
					border: 1px solid rgb(var(--primary-3));
					color: rgb(var(--arcoblue-6));
				}
			}
		}
	}

	.theme-btn {
		position: fixed;
		top: 20px;
		right: 30px;
		z-index: 999;
	}

	// 新增弹窗层级设置
	.arco-modal-wrapper {
		z-index: 1000;
	}

	.footer {
		align-items: center;
		box-sizing: border-box;
		position: absolute;
		bottom: 10px;
		z-index: 999;

		.beian {
			.text {
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0.2px;
				line-height: 20px;
				text-align: center;
			}

			.below {
				align-items: center;
				display: flex;
			}
		}
	}
}
</style>
